<template>
  <div>
    <p class="title">{{ articleData.data.name }}</p>
    <div class="post-content" v-highlight v-html="articleData.data.content"></div>
    <div class="bottom">
      <p @click="goHome" class="top">
        <i class="el-icon-s-home">&nbsp;&nbsp;{{articleData.name}}</i>
      </p>
      <p class="pub_date">发布时间 : {{ articleData.data.pub_date }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    articleData: {
      type: Object,
      default: null,
    },
  },
  watch: {
    articleData() {
      this.copy();
    },
  },
  mounted() {
    this.copy();
  },
  methods: {
    copy() {
      var pre = document.querySelectorAll(".copy_but");
      var code = document.querySelectorAll("code");
      for (let i = 0; i < pre.length; i++) {
        pre[i].children[0].addEventListener("click", () => {
          var text = code[i].innerText; //这是字符串
          let textarea = document.createElement("textarea");
          document.body.appendChild(textarea);
          textarea.setAttribute("readonly", "readonly");
          textarea.value = text;
          textarea.select();
          if (document.execCommand("copy")) {
            document.execCommand("copy");
            this.$message({
              message: "复制成功",
              type: "success",
            });
          }
          document.body.removeChild(textarea);
        });
      }
    },
    goHome(){
        this.$emit('goHome')
    }
  },
};
</script>

<style lang="less" scoped>
.title {
  margin-top: 30px;
  text-align: center;
  font-size: 25px;
}
.bottom {
  display: flex;
  margin-top: 20px;
  padding-top: 40px;
  border-top: 2px solid #ddd;
  p{
      width: 50%;
  }
  .pub_date {
    text-align: right;
    color: #aaa;
  }
  .top:hover{
      cursor: pointer;
  }
}

.post-content {
  // color: 主要样式;
  padding: 20px;
  /deep/ pre {
    margin: 10px 0;
    position: relative;
    display: block;
    width: 800px;
    padding: 30px 5px 2px;
    overflow-x: hidden;
    line-height: 20px;
    text-align: left;
    background-color: #21252b;
    box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%);
    
  }
  /deep/ code{
     background-color: #21252b; 
    } 
  //   三个点
  /deep/ pre::before {
    position: absolute;
    top: 10px;
    left: 15px;
    width: 12px;
    height: 12px;
    overflow: visible;
    font-weight: 700;
    font-size: 16px;
    line-height: 12px;
    white-space: nowrap;
    text-indent: 75px;
    background-color: #fc625d;
    border-radius: 16px;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    content: attr(codetype);
  }
  // /** 滚动条 */
  // :deep(.hljs) {
  //   overflow-x: auto;
  // }

  // :deep(.hljs::-webkit-scrollbar) {
  //   width: 12px !important;
  //   height: 12px !important;
  // }

  // :deep(.hljs::-webkit-scrollbar-thumb) {
  //   height: 30px !important;
  //   background: #d1d8e6;
  //   background-clip: content-box;
  //   border: 2px solid transparent;
  //   border-radius: 19px;
  //   opacity: 0.8;
  // }

  // :deep(.hljs::-webkit-scrollbar-thumb:hover) {
  //   background: #a5b3cf;
  //   background-clip: content-box;
  //   border: 2px solid transparent;
  // }

  // :deep(.hljs::-webkit-scrollbar-track-piece) {
  //   width: 30px;
  //   height: 30px;
  //   background: #333;
  // }

  // ::-webkit-scrollbar-button {
  //   display: none;
  // }
  // 复制功能样式
  /deep/.copy_but {
    font-size: 20px !important;
    color: #fff;
    margin: -20px 10px 5px 0px;
    text-align: right;
  }
  /deep/.copy_but:hover {
    cursor: pointer;
  }
}
</style>